<template>
  <div>
    <h2 class="page-title">用户列表</h2>
    <el-row class="mt20">
        <el-col :span="6" class="mr20">
           <el-input 
            placeholder="请输入搜索关键字"
            prefix-icon="el-icon-search" 
            v-model="search.keyword"
            type="text"
           ></el-input>
        </el-col>
        <el-col :span="6" class="mr20">
          <el-select  class="rolese"  prefix-icon="el-icon-lock"   v-model="search.role" placeholder="请选择角色">
            <el-option
              v-for="(item,index) in roleList"
              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="success" @click="todoSearch">确认搜索</el-button>
        </el-col>
    </el-row>
    <el-row class="mt20">
      <el-col :span="23">
          <el-table :data="userList" style="width: 100%" center border

          >
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="username" label="用户名" width="120">
                
            </el-table-column>
            <el-table-column prop="avatar" label="头像" width="70">
              <template #default="scope">
                  <el-avatar  v-if="scope.row.avatar" :src="scope.row.avatar.replace(/public/,baseURL)"></el-avatar>
                  <el-avatar  v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号码" >
                <template #default="scope">
                     <span>
                       {{ $filters.telformat(scope.row.phone,'-') }}
                     </span>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="注册时间" >
                 <template #default="scope">
                     <span>
                       {{ $filters.timeFormat(scope.row.time) }}
                     </span>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="角色"  >
                <template #default="scope">
                     <el-tag v-if="scope.row.role" size="mini" :hit="true" effect="light" class="myrole" :color="roleList.find(item=>item.value==scope.row.role).color">{{roleList.find(item=>item.value==scope.row.role).text}}</el-tag>
                     <template v-else>
                        <el-tag v-if="scope.row.role==0" size="mini" :hit="true" effect="light" class="myrole" :color="roleList.find(item=>item.value==scope.row.role).color">{{roleList.find(item=>item.value==scope.row.role).text}}</el-tag>
                        <el-tag v-else size="mini" :hit="true" effect="light" color="pink" >未知身份</el-tag>
                     </template>
                </template>
            </el-table-column>
            <!--  -->
            <el-table-column label="操作" v-if="userInfo&&userInfo.role>=2">
                <template #default="scope">
                <el-button v-if="userInfo.role>scope.row.role" size="mini"  type="warning" @click="showDialog(scope.$index, scope.row)"
                  >修改</el-button
                >
                 <el-popconfirm
                 v-if="userInfo.role>scope.row.role"
                  confirm-button-text="确定"
                  cancel-button-text="不删除"
                  icon="el-icon-info"
                  icon-color="red"
                  title="你确定真的要删除吗?"
                  @confirm="handleDelete(scope.$index, scope.row)"
                >
                  <template #reference>
                      <el-button
                  size="mini"
                  type="danger"
                  >删除</el-button>
                  </template>
                </el-popconfirm>
                
              </template>
            </el-table-column>
          </el-table>
      </el-col>
    </el-row>
    <el-dialog
        title="修改用户角色"
        v-model="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <el-form 
        ref="uform" 
        :model="udata" 
        label-width="80px"
        status-icon 
        class="myform"
        :rules="rules"
      >
      
       <el-form-item label="用户名" prop="username" >
        <el-input 
        v-model="udata.username"
        type="text"
         placeholder="请输入用户名"
         autocomplete="off"
         disabled
      ></el-input>
       </el-form-item>
        <el-form-item label="手机号" prop="phone" >
        <el-input 
        v-model="udata.phone"
        type="text"
         placeholder="请输入手机号"
         autocomplete="off"
         disabled
      ></el-input>
       </el-form-item>
         <el-form-item label="用户权限"  prop="role">
              <el-select v-if="userInfo" class="rolese"  prefix-icon="el-icon-lock"   v-model="udata.role" placeholder="请选择角色">
                <el-option
                  v-for="(item,index) in roleList"
                  :key="index"
                  :label="item.text"
                  :value="item.value"
                  v-show = "item.value < userInfo.role"
                >
                </el-option>
              </el-select>
          </el-form-item>
    </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消操作</el-button>
            <el-button type="primary" @click="changeuser"
              >确认修改</el-button
            >
          </span>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import {reactive,toRefs,ref,computed,onMounted} from "vue"
import { ajax } from '../../service';
import {useStore} from "vuex"
import { toast } from '../../utils';

export default {
  name:"user-list",
  setup(){
    const uform = ref()
    const state = reactive({
      userList:[],
      search:{
        keyword:'',
        role:""
      },
      keyword:'',
      dialogVisible:false,
      udata:{

      },
      rules:{
        role:[
          { required: true, message: '请选择', trigger: 'blur'}
        ],
      }
    })
    const store = useStore();
    const userInfo = computed(()=>{
      return store.state.userInfo;
    })
    const getUserList = async (options)=>{
        const {code,result} = await ajax.getuserlist(options);
        if(code==200){
          state.userList = result
        }
    }
    // 删除
    const handleDelete =async  (index,row)=>{
      const{code,result} = await ajax.deloneuser({
        _id:row._id
      })
      if(code==200){
        state.userList.splice(index,1)
      }
    }
    onMounted(()=>{
       getUserList()
    })
    const handleClose = ()=>{
      state.dialogVisible = false; 
    }
    const showDialog = (index,row)=>{
      state.dialogVisible = true; 
      state.udata = {...row};
      state.udata.index = index;
    }
    const changeuser =  ()=>{
      uform.value.validate(async valid=>{
        if(valid){
            const {code,result} = await   ajax.updateoneuser({
              _id:state.udata._id,
              role:state.udata.role 
            })
            if(code==200){
              state.dialogVisible  = false;
              // state.userList = state.userList.map(item=>{
              //   if(item._id==state.udata._id){
              //     item = {...item, role:state.udata.role }
              //   }
              //   return item;
              // })
              state.userList.splice(state.udata.index,1,state.udata)
            }
        }else{
          toast.showError("请操作")
        }
      })
    }
    const todoSearch =  ()=>{
        getUserList(state.search)
    }
    return {
      ...toRefs(state),
      userInfo,
      handleDelete,
      uform,
      handleClose,
      showDialog,
      changeuser,
      todoSearch
    }
  }
}
</script>


<style>
.myrole{
  color:#fff;
}
</style>